import { useAppDispatch } from "../../redux"
import {addCount,decrementCount,delShopping} from "../../redux/modules/shoppingCarSlice"
import { addShoppingCountApi } from "../../request/shoppingCar/addShoppingCountApi"
import { decrementCountApi } from "../../request/shoppingCar/decreaseShoppingCountApi"
import { delShoppingApi } from "../../request/shoppingCar/delShoppingApi"

const ShoopingCare:React.FC<any>=(shopping)=>{
    const {shoppingName,id,book_profile,book_public,book_price,shoppingCount,img_url} = shopping.shopping
    const url = "http://localhost:8080/BookService/static/image/"+img_url
    console.log(url)
    const dispatch = useAppDispatch()

    const addBookCount = (bookId:any)=>{
        dispatch(addCount(bookId))
        addShoppingCountApi(bookId)
    }
    const decrementBookCount = (bookId:any)=>{
        dispatch(decrementCount(bookId))
        decrementCountApi(bookId)
    }
    
    const delShoppingBook = (bookId:any)=>{
        dispatch(delShopping(bookId))
        delShoppingApi(bookId)
    }


    return(
        <li className="w-3/4 bg-green-200 h-52 ml-32 mt-3 inline-flex py-2 px-2.5">
            <div className="mr-1.5 ml-8">
                <img src={url} alt="" className="min-w-24 h-48"/>
            </div>
            <div className="ml-auto w-2/3">
                <h4 className="text-lg"><span className="text-sm">书名：</span>{shoppingName}</h4>
                <p><span className="text-sm mt-2">出版信息：</span>{book_public}</p>
                <p className="text-sm mt-1">{book_profile}</p>
                <div className="text-2xl mt-2"><span className="text-sm mr-1.5">$</span>{book_price}</div>
                <div className="mt-3">
                    <span className="bg-slate-400 w-4 h-6 inline-block text-center" onClick={()=>addBookCount(id)}>+</span>
                    <span className="bg-white w-7 inline-block text-center">{shoppingCount}</span>
                    <span className="bg-slate-400 w-4 h-6 inline-block text-center mr-32" onClick={()=>decrementBookCount(id)}>-</span>
                    <span className="bg-blue-300 w-24 h-8 inline-block text-center ml-64 pt-1" onClick={()=>delShoppingBook(id)}>移出购物车</span>
                </div>
            </div>
        </li>
    )
}

export default ShoopingCare